<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link tag="button" to="/home">首页</router-link>
      <router-link active-class="aaa" to="/about">关于</router-link>
      <router-link :to="'/user/'+userId">用户</router-link>

<!--     <router-link :to="'/profile/'+id" tag="button">档案</router-link>
 -->
  <!--以query方式拼接 -->
    <router-link tag="button" :to="{path: '/profile',
    query: {
      name:'hgt',age:18,height:1.65
      }
      }">档案</router-link>

<!-- 不再通过router-link，通过button跳转,也就是说 通过代码跳转 -->
    <button @click="ctnClick">用户</button>
    <button @click="ctnClick1">档案</button>


      <p>通过代码方式跳转</p>
      <button @click="btnClick1">bb</button>
      <button @click="btnClick">aa</button> 
      <!--跟标签的效果其实是一样的 -->

<!-- 被这个标签包裹的组件会一直保持活跃的状态 -->
    <keep-alive>
            <router-view/>  <!--相当于一个标签用于接收router-link里面的内容-->
    </keep-alive>

  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
return{
  userId: 'aa',
  id:'123'
}
  },
  methods: {



    btnClick(){
      //浏览器中可以前后返回
      this.$router.push('/home')

      console.log(this.$router)
      console.log(this.$route)
    },
    btnClick1(){
      //浏览器中不可以前后返回
      this.$router.replace('/home')
    },
    ctnClick(){
      this.$router.push('/user/'+this.userId)
    },
    ctnClick1(){
      this.$router.push({
        path:'/profile',
        query:{
          name:'hgt',
          age:18,
          height:165
        }
      })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.bbb{
  color: blueviolet;
}
</style>
